<template>
	<view class="listRight">
		<view class="author-img">
			<image class="img" src="http://124.221.26.166:8080/pic/girl.jpg"  @click="click" mode=""></image>
			<view class="iconfont icon-jiahao add" v-show="show"  @click="hide" ></view>
		</view>
		<view class="iconfont icon-xiai1 right-box" :style="color" @click="changeColor">
		</view>
		<view class="number">
			{{item.loveNumber}}
		</view>
		<view class="iconfont icon-pinglun right-box"  @click="openComment">
		</view>
		<view class="number">
			{{item.commentNumber}}
		</view>
		<view class="iconfont icon-zhuanfa right-box">
		</view>
		<view class="number">
			{{item.shareNumber}}
		</view>
		<view class="around">
			<image class="img" src="http://124.221.26.166:8080/pic/cd.webp" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		// 动态渲染页面
		// 接收来自videoList的item
		props:['item'],
		name:"listRight",
		data() {
			return {
				// 默认展示关注加号图标
				show:true,
				//为空，默认颜色
				color:''
			};
		},
		methods:{
			hide(){
				// console.log('hide')
				// 点击关注后隐藏加号
				this.show=false
			},
			changeColor(){
				// 判断爱心颜色,如果为默认,则赋予红色,否则则为默认颜色
				this.color=this.color===''?"color:red;":''
			},
			change(){
				this.color="color:red;"
			},
			click(){
				uni.navigateTo({
					url: '/pages/user/user'
				})
			},
			openComment(){
				// 向外触发事件,点击评论图标.弹出评论区
				this.$emit('open')
			}
		}
	}
</script>

<style>
	.listRight{
		width: 50px;
		margin: 0 auto;
	}
	.author-img{
		height: 50px;
		width: 50px;
		border-radius: 50%;
		border: 2px solid #FFFFFF;
		position: relative;
	}
	.img{
		height: 50px;
		width: 50px;
		border-radius: 50%;
	}
	.right-box{
		width: 50px;
		height: 50px;
		margin-top: 13px;
		text-align: center;
		line-height: 55px;
		color: #FFFFFF;
		font-size: 33px;
	}
	.number{
		font-size:10px;
		text-align: center;
		color: #FFFFFF;
	}
	.around{
		margin-top: 15px;
		/* 添加动画  动画名字rotate,旋转一圈时间1.5s,重复infinite*/
		animation: rotate 2s linear 0.2s infinite;
		width: 50px;
		height: 50px;
	}
	/* 点关注的加号 */
	.add{
		width: 18px;
		height: 18px;
		border-radius: 50%;
		background: red;
		position: absolute;
		bottom: -9px;
		left: 16px;
		text-align: center;
		line-height: 18px;
		color: #FFFFFF;
		font-size: 10px;
	}
	
	
	/* 旋转动画效果 */
	@keyframes rotate{
		0%{
			transform: rotate(0deg);
		}
		100%{
			transform: rotate(360deg);
		}
		
	}

</style>